<script>
	let name = '可伸缩矢量图形';
</script>

{name}
<svg viewBox="0 0 100 100">
	//矩形
	<rect x="50" y="5" width="20" height="10" fill="#fff" transform="translate(10,20) scale(1.2)" />
	//多边形
	<polygon points="0,0 10,0 50,80" />
	//椭圆
	<ellipse cx="40" cy="30" rx="10" ry="5" />
	<g style="tranform:translateX(50px)">
		//圆形
		<circle id="c1" cx="50" cy="50" r="10" stroke="#f40" fill="#fff980" />
		//直线 //属性 storke 边框 fill 内部填充(transparent 透明色)
		<line
			x1="80"
			y1="80"
			x2="80"
			y2="20"
			stroke="#f40"
			stroke-width=".5"
			stroke-opacity="0.5"
			stroke-dasharray=" 2 1 2"
			stroke-dashoffset="20"
		/>
		//折线
		<polyline points="45,0 50,0 50,15 80,60 70,20 45,0" fill="transparent" stroke="#f40" />
	</g>
</svg>

<style>
	/* your styles go here */
	svg {
		widows: 500px;
		height: 500px;
		background-color: #333;
	}
	#c1 {
		animation: move 1s ease 1s infinite alternate;
	}
	@keyframes move {
		0% {
			transform: scale(1);
		}
		50% {
			transform: scale(1.5);
			fill: red;
		}
		100% {
			transform: scale(1);
			opacity: 0.5;
		}
	}
</style>
